<template>
  <!--实体接口-->
    <basic-container>
        <div>
            <m-s-search :list="EntityInterfaceOption.column" @searchClick="v=>{queryForm=v,page.currentPage=1,getList()}"></m-s-search>
        </div>
        <avue-crud :option="EntityInterfaceOption"
                   :table-loading="loading"
                   :data="tableData"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @selection-change="v=>selection=v"
                   ref="crud"
                   :page.sync="page">
            <template slot="menuLeft" slot-scope="{size}">
                <el-button :size="size" type="primary"
                           @click="addToTabsList('实体接口',{oid:-1},'interfaceTemp','open')">
                    创建
                </el-button>
                <el-button :size="size" :disabled="selection.length===0" @click="del">删除</el-button>
                <el-button :size="size" :disabled="selection.length===0" @click="start">启用</el-button>
                <el-button :size="size" :disabled="selection.length===0" @click="stop">禁用</el-button>
            </template>


            <template slot="interfaceAttribute" slot-scope="{row}">
        <span v-for="(item,index) in row.extAttributes">
          {{ item.nameCn }} <span v-if="index!=row.extAttributes.length-1">,</span>
        </span>
            </template>
            <template slot="nameCn" slot-scope="{row}">
        <span class="column-btn"
              @click="addToTabsList(row.nameCn+'实体接口',row,'interfaceTemp','view')">
          {{ row.nameCn }}
        </span>
            </template>

            <template slot="menu" slot-scope="{row}">
                <el-button type="text" @click="addToTabsList(row.nameCn+'实体接口',row,'interfaceTemp','view')">
                    查看详情
                </el-button>
                <el-button type="text" @click="addToTabsList(row.nameCn+'实体接口',row,'interfaceTemp','edit')">
                    修改
                </el-button>
                <el-button type="text" :disabled="row.checkState!==2" @click="option(row,1)">检入</el-button>
                <el-button type="text" :disabled="row.checkState!==2" @click="option(row,2)">撤销检出</el-button>
                <el-button type="text"
                           @click="addToTabsList(row.nameCn+'实体接口历史',row,'interfaceHistoryTemp','view')">
                    历史
                </el-button>
            </template>
        </avue-crud>

        <ms-drawer :visible.sync="visible" :tab-list.sync="tabsList" @refresh="getList()"></ms-drawer>
    </basic-container>
</template>
<script>
import MSSearch from "@/DMDComponents/MSSearch.vue";

import * as api from "@/api/modulManage/interface"

export default {
    name: "EntityInterface",
    components: {MSSearch},
    inject: ["EntityInterfaceOption"],
    data() {
        return {
            visible: false,
            tabsList: [],
            queryForm: {},
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 1
            },
            tableData: [],
            loading: false,
            selection: []
        }
    },
    methods: {
        // 向抽屉中添加tab页 根据 oid 去重
        addToTabsList(title, row, component, type) {
            let ids = this.tabsList.map(item => (item.row.oid + '-' + item.component));
            if (!ids.includes(row.oid + '-' + component)) {
                this.tabsList.push({title, row, component, type})
            }
            this.visible = true;
        },

        currentChange(currentPage) {
            this.page.currentPage = currentPage;
            this.getList();

        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
            this.getList();
        },
        del() {
            this.$confirm("是否删除").then(() => {
                let ids = this.selection.map(i => i.masterOid).join(",")
                api.delInterface({ids}).then(() => {
                    this.getList();
                })
            })
        },

        start() {
            let ids = this.selection.map(i => i.masterOid).join(",")
            api.startUse({ids}).then(() => {
                this.getList();
            })
        },
        stop() {
            let ids = this.selection.map(i => i.masterOid).join(",")
            api.stopUse({ids}).then(() => {
                this.getList();
            })
        },

        option(row, type) {
            let method = type === 1 ? "publish" : "revokeCheckout";
            let msg = type === 1 ? "检入" : "撤销检出"
            this.$confirm(`确定${msg}当前数据?`).then(() => {
                api[method]({id: row.oid}).then(() => {
                    this.getList();
                    this.$message.success(`${msg}成功`);
                })
            })
        },

        getList() {
            api.getInterface({
                current: this.page.currentPage,
                size: this.page.pageSize, ...this.queryForm
            }).then(res => {
                const {list, totalRows} = res.data.data;
                this.page.total = totalRows;
                this.tableData = list ? list : [];
            })
        }
    },
    mounted() {
        this.getList();
    }
}
</script>
